<template>
	<div style="height:100%;">
	<menus :name="key">
		<template>
		<div v-if="loaded">
			<div v-if="success">
			<div class="comments">
				<div>
				<div v-html="text"></div>
				</div>
				<div>
				<div v-highlight v-html="src" class="markdown-body" id="content"></div>
				</div>
			</div>
			<div class="custom-code-box">
				<custom-code :js="source.js" :template="source.template" :css="source.css" />
			</div>
			</div>
			<div v-else>
			<div class="error-box">
				<div>数据读取失败</div>
				<div class="btn-box">
				<button class="btn" @click="getDatas">再次尝试</button>
				</div>
			</div>
			</div>
		</div>
		<div v-else>
			<div class="loading-box">
			<div>
				<div class="loading"></div>
				<div>数据加载中</div>
			</div>
			</div>
		</div>
		</template>
	</menus>
	</div>
</template>
<script>
import "highlight.js/styles/github.css";

import menus from "@/components/menus";
import CustomCode from "@/components/custom-code";
export default {
	components: {
	menus,
		CustomCode
	},
	computed: {
		key() {
			const key = this.$route.params.module;
			return key;
		}
	},
	data () {
		return {
			loaded: false,
			success: true,
			text: "",
			src: "",
			source: {
			js: "",
			template: "",
			css: ""
			}
		}
	},
	watch: {
		$route: function (v1) {
			this.getDatas();
		}
	},
	mounted () {
		this.getDatas();
	},
	methods: {
	async getDatas () {
		try {
			this.loaded = false;
			const [text, src] = await Promise.all(
				[
					$utils.readFile(`./res/md/${this.key}.md`),
					$utils.readFile(`./res/src/${this.key}.vue`)
				]
			);
			this.text = marked.parse(text);
			const source = $utils.parseVue(src);
			this.source = source;
			this.src = marked.parse("```\n" + src + "\n```");
			this.success = true;
		} catch (e) {
			this.success = false;
			this.text = "读取失败";
		} finally {
			this.loaded = true;
		}
	}
	}
}
</script>
<style lang="scss" scoped>
body {
	height: 100%;
	overflow: hidden;
}
.body {
	overflow: hidden;
}
.comments {
	>div {
	height: 45vh;
	display: inline-block;
	vertical-align: top;
	overflow: auto;
	border:2px solid #17579e;
	border-radius: 10px;
	padding:10px;
	}
	>div:first-child {
	width: calc(50% - 30px);
	margin-right: 5px;
	}
	>div:last-child {
	width: calc(50% - 30px);
	margin-left: 5px;
	}
}

.custom-code-box {
	margin-top: 10px;
	width: calc(100% - 25px);
	height: calc(48vh - 10px);
	border:2px solid #17579e;
	border-radius: 10px;
	padding:10px;
}

.loading-box {
	width: calc(100% - 25px);
	height: 100%;
	padding-top: 20vh;
	>div {
	width: 200px;
	height: 400px;
	text-align: center;
	margin: auto;
	>div:last-child {
		margin-top: 5vh;
	}
	}
}

.loading {
	position: relative;
	width: 200px;
	height: 200px;
	border: 4px solid #000;
	border-top-color: rgba(0, 0, 0, 0.2);
	border-right-color: rgba(0, 0, 0, 0.2);
	border-bottom-color: rgba(0, 0, 0, 0.2);
	border-radius: 100%;

	animation: circle infinite 0.75s linear;
}

@keyframes circle {
	0% {
	transform: rotate(0);
	}
	100% {
	transform: rotate(360deg);
	}
}

.error-box {
	width: 200px;
	margin: auto;
	margin-top: 20vh;
	text-align: center;

	.btn-box {
	margin-top: 1vh;

	.btn {
		cursor: pointer;
		border: none;
		background:#409EFF;
		border-radius: 10px;
		padding:5px 15px;
		color: #FFFFFF;
	}
	}
}
</style>